<template>
  <view>
    <view v-if="articleList && articleList.length" class="recommend-goods-container">
      <view class="title-gas">猜你喜欢</view>
      <view v-for="(item, index) in articleList" :key="index" class="like-goods-item">
        <articleItem class-name="articleItem" :article-data="item" @click="itemClick" />
      </view>
    </view>
  </view>
</template>
<script>
import articleItem from './article-item'
export default {
  components: {
    articleItem
  },
  props: {
    showSubName: { type: Boolean, default: true }, // 是否显示商品副标题
    imageRadius: { type: String, default: '20rpx' }, // 商品图片圆角
    from: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      listQuery: {
        page_size: 10,
        page_no: 1
      },
      loading: false,
      nomore: false,
      articleList: []
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.listQuery = {
        page_size: 10,
        page_no: 1
      }
      this.loading = false
      this.nomore = false
      this.articleList = []
      this._getRecommend()
    },
    async _getRecommend() {
      if (this.loading || this.nomore) return
      this.loading = true
      const res = await this.$api.materialApi.getRecommendGuest(this.listQuery)
      if (res.success) {
        if (this.listQuery.page_no === 1) {
          this.articleList = []
        }
        if (res.data && res.data.length < this.listQuery.page_size) {
          this.nomore = true
        }
        this.articleList = this.articleList.concat(res.data || [])
      }
      this.loading = false
      this.$emit('getCommendData', this.articleList.length > 0)
    },
    loadMore() {
      if (this.loading || this.nomore) return
      this.listQuery.page_no++
      this._getRecommend()
    },
    itemClick(item) {
      console.log('item', item)
    }
  }
}
</script>
<style lang="scss">
.recommend-goods-container {
  /* display: flex;
  flex-wrap: wrap;
  padding: 20rpx 12rpx;
  justify-content: space-between;
  overflow: hidden; */
  // padding: 6rpx;
  box-sizing: border-box;
  background-color: #f5f5f5;
  .title-gas{
    padding: 32rpx 24rpx;
    font-size: 28rpx;
    color: #000;
    font-weight: bold;
  }
  .like-goods-item {
    width: 100%;
    // padding: 6rpx;
    margin-bottom: 20rpx;
    box-sizing: border-box;
    display: inline-block;

    .likeItem,
    goods-item>view{
      background-color: #fff;
    }
  }
}
.loading-tip {
  text-align: center;
  color: #666;
  font-size: 24rpx;
  padding: 10rpx  0;
}
</style>
